<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <style>
        /* 标签选择器，会选中所有span标签 */
        span{
            color: red;
        }
        /* class选择器 */
        .p1{
            color: green;
        }
        /* id选择器 */
        #p1{
            color: greenyellow;
        }
        /* 多个class同时选择，选择同时包含p和p4的元素 */
        .p.p4{
            color: blue;
        }
        /* 通用选择器，选择所有的元素，一般我们用来初始化元素，让所有浏览器的显示效果一样 */
        *{
            /* border: 1px solid black; */
            margin: 0;
            padding: 0;
        }
        /* 后代选择器 即是.box的后代又是p标签*/
       /* .box p{
           color: coral;
       } */
       /* 子代选择器 即是.box的子代又是p标签*/
       .box > p{
           color: pink;
       }
       .btn{
           width: 150px;
           height: 80px;
           background-color: rgb(129, 145, 110);
       }
       /* 选择class=btn的元素，且鼠标放在他上面 */
       .btn:hover{
        background-color: rgb(156, 175, 133);
       }
       .box1{
           padding:50px;
           width: 200px;
           border:1px solid green
       }
       .box2{
           width: 100px;
           height: 100px;
           background-color: rgb(153, 190, 159);
       }
       /* .box1:hover .box2{
           background-color: rgb(177, 135, 135);
       } */
       .box1:active{
           background-color: rgb(132, 160, 201);
       }
       /* 访问过的链接，可以通过删除浏览记录 */
       a:visited{
           color: red;
       }
       input:focus{
           background-color: rgb(26, 64, 99);
       }
    </style>
</head>
<body>
    <span>蚕丛及鱼凫</span>
    <span>开国何茫然</span>
    <p class="p1">而来四万八千岁，不与秦塞通人烟</p>
    <p id="p1">西当太白有鸟道，可以横绝峨眉巅</p>
    <!-- 快捷键写法 p.p2 -->
    <p class="p2"></p>
    <!-- 快捷键写法 p#p2 -->
    <p id="p2"></p>
    <!-- 快捷键写法 p#p3.p -->
    <p id="p3" class="p">
        茅屋为秋风所破格
    </p>
    <!-- 快捷键写法  p.p.p4  -->
    <p class="p p4">
        安得广厦千万间，大庇天下寒士俱欢颜
    </p>
    <div class="box">
        <p> 送孟浩然之光临 </p>
        <div>
            <p>千山鸟飞绝，万径人踪灭</p>
            <span>孤舟蓑笠翁，独钓寒江雪</span>
        </div>
    </div>
    <button class="btn">一个普通的按钮</button>
    <div class="box1">
        box1
        <div class="box2">
            box2
        </div>
    </div>
    <a href="http://163.com">163</a>
    <input type="text">

</body>
</html>